<template>
     <div class="yh-table">
          <div class="header" v-if="showHandle">
               <slot name="header">
                    <div class="handler">
                         <slot name="headerHandler"></slot>
                    </div>
               </slot>
          </div>
          <el-table
               :data="listData"
               border
               @selection-change="selectionChange"
               v-bind="childrenProps"
               :style="{ height: getTableHeight }"
               class="eltable"
               @row-click="rowclick"
               :stripe="isStripe"
               v-loading="tableLoading"
               element-loading-background="rgba(0, 0, 0, 0.5)"
               element-loading-text="加载中..."
               :row-style="{ height: '10px' }">
               <template #empty>
                    <span style="color: #fff">暂无数据</span>
               </template>
               <el-table-column v-if="showSelectColumn" type="selection" align="center" width="60"></el-table-column>
               <el-table-column v-if="showIndexColumn" type="index" label="序号" align="center" width="80"></el-table-column>
               <template v-for="item in propList" :key="item.prop">
                    <!-- 普通一级表头 -->
                    <el-table-column v-bind="item" align="center" v-if="!item.children">
                         <template #default="scope">
                              <slot :name="item.slotName" :row="scope.row">
                                   {{ scope.row[item.prop] === 0 || scope.row[item.prop] ? scope.row[item.prop] : '-' }}
                              </slot>
                         </template>
                    </el-table-column>
                    <!-- 多级表头 -->
                    <el-table-column v-else :label="item.label" align="center">
                         <template v-for="(item2, item2Index) in item.children" :key="item2.prop">
                              <!-- 二级表头 -->
                              <el-table-column align="center" v-bind="item2" v-if="!item2.children">
                                   <template #default="scope">
                                        <slot :name="item2.slotName" :row="scope.row">
                                             {{ scope.row[item2.prop] === 0 || scope.row[item2.prop] ? scope.row[item2.prop] : '-' }}
                                        </slot>
                                   </template>
                              </el-table-column>
                              <!-- 三级表头 -->
                              <el-table-column align="center" v-bind="item2" v-else>
                                   <template v-for="(item3, item3Index) in item2.children" :key="item3.prop">
                                        <el-table-column align="center" v-bind="item3" v-if="!item3.children">
                                             <template #default="scope">
                                                  <slot :name="item3.slotName" :row="scope.row">
                                                       {{ scope.row[item3.prop] === 0 || scope.row[item3.prop] ? scope.row[item3.prop] : '-' }}
                                                  </slot>
                                             </template>
                                        </el-table-column>
                                        <!-- 四级表头 -->
                                        <el-table-column align="center" v-bind="item3" v-else>
                                             <template v-for="(item4, item4Index) in item3.children" :key="item4.prop">
                                                  <el-table-column align="center" v-bind="item4" v-if="!item4.children">
                                                       <template #default="scope">
                                                            <slot :name="item4.slotName" :row="scope.row">
                                                                 {{
                                                                      scope.row[item4.prop] === 0 || scope.row[item4.prop] ?
                                                                           scope.row[item4.prop]
                                                                      :    '-'
                                                                 }}
                                                            </slot>
                                                       </template>
                                                  </el-table-column>
                                                  <!-- 五级表头 -->
                                                  <el-table-column align="center" v-bind="item4" v-else>
                                                       <template v-for="(item5, item5Index) in item4.children" :key="item5.prop">
                                                            <el-table-column align="center" v-bind="item5">
                                                                 <template #default="scope">
                                                                      <slot :name="item5.slotName" :row="scope.row">
                                                                           {{
                                                                                scope.row[item5.prop] === 0 || scope.row[item5.prop] ?
                                                                                     scope.row[item5.prop]
                                                                                :    '-'
                                                                           }}
                                                                      </slot>
                                                                 </template>
                                                            </el-table-column>
                                                       </template>
                                                  </el-table-column>
                                             </template>
                                        </el-table-column>
                                   </template>
                              </el-table-column>
                         </template>
                    </el-table-column>
               </template>
               <slot></slot>
          </el-table>
          <!-- 普通表格数据 -->
          <!-- <el-table :data="listData" border @selection-change="selectionChange" v-bind="childrenProps" :height="tableHeight"
      class="eltable" @row-click="rowclick" :stripe="isStripe" v-loading="tableLoading">
      <template #empty>
        <span style="color: #fff">暂无数据</span>
      </template>
      <el-table-column v-if="showSelectColumn" type="selection" align="center" width="60"></el-table-column>
      <el-table-column v-if="showIndexColumn" type="index" label="序号" align="center" width="80"></el-table-column>
      <RecursiveTableColumn v-for="item in propList" :key="item.prop" :column="item">
        <slot></slot>
      </RecursiveTableColumn>
      <slot></slot>
    </el-table> -->
          <!-- 分页 -->
          <div class="footer" v-if="showpagination">
               <slot name="footer">
                    <el-config-provider :locale="locale">
                         <el-pagination
                              @size-change="handleSizeChange"
                              :page-size="page.pagesize"
                              :background="pageNationBackground"
                              @current-change="handleCurrentChange"
                              :current-page="page.pageindex"
                              :total="totalCount"
                              :page-sizes="[5, 10, 15, 20, 50, 100]"
                              layout="total, sizes, prev, pager, next, jumper">
                              <template #empty>
                                   <span style="color: #fff">暂无数据</span>
                              </template>
                         </el-pagination>
                    </el-config-provider>
               </slot>
          </div>
     </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
// @ts-ignore
import RecursiveTableColumn from './RecursiveTableColumn.vue'
// import zhCn from "element-plus/lib/locale/lang/zh-cn";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
export default defineComponent({
     props: {
          isStripe: {
               type: Boolean,
               default: true,
          },
          tableLoading: {
               type: Boolean,
               default: false,
          },
          showIndexColumn: {
               type: Boolean,
               default: true,
          },
          showSelectColumn: {
               type: Boolean,
               default: false,
          },
          showpagination: {
               type: Boolean,
               default: true,
          },
          listData: {
               type: Array as PropType<any[]>,
               default: () => [],
          },
          propList: {
               type: Array as PropType<any[]>,
               default: () => [],
          },
          childrenProps: {
               type: Object,
               default: () => ({}),
          },
          totalCount: {
               type: Number,
               default: 0,
          },
          page: {
               type: Object,
               default: () => ({
                    offset: 1,
                    pagesize: 10,
               }),
          },
          tableHeightProps: {
               default: 'calc(90% - 45px)',
          },
          pageNationBackground: {
               type: Boolean,
               default: true,
          },
          showHandle: {
               type: Boolean,
               default: true,
          },
     },
     emits: ['selectionChange', 'update:page', 'handleDeleteClick2', 'handleEditClick2', 'rowclick'],
     components: {
          RecursiveTableColumn,
     },
     computed: {
          getTableHeight() {
               if (this.showpagination && this.showHandle) {
                    return 'calc(90% - 45px)'
               } else if (this.showpagination && !this.showHandle) {
                    return 'calc(90% - 0px)'
               } else if (!this.showpagination && this.showHandle) {
                    return 'calc(100% - 45px)'
               } else {
                    return 'calc(100% - 0px)'
               }
          },
     },
     setup(props, { emit }) {
          const tableHeight = ref(props.tableHeightProps)
          const locale = ref(zhCn)

          // 删除数据
          const handleDeleteClick2 = (rowItem: any) => {
               emit('handleDeleteClick2', rowItem)
          }
          // 修改
          //编辑数据
          const handleEditClick2 = (item: any) => {
               emit('handleEditClick2', item)
          }
          const selectionChange = (value: any) => {
               if (props.showSelectColumn) {
                    emit('selectionChange', value)
               }
          }
          const pageInfo = ref({ ...props.page })
          const handleCurrentChange = (pageindex: number) => {
               pageInfo.value.offset = pageindex
               emit('update:page', pageInfo.value)
          }
          const handleSizeChange = (pagesize: number) => {
               pageInfo.value.pagesize = pagesize
               emit('update:page', pageInfo.value)
          }
          // 点击某一行
          const rowclick = (val: any) => {
               emit('rowclick', val)
          }
          return {
               selectionChange,
               handleCurrentChange,
               handleSizeChange,
               handleDeleteClick2,
               handleEditClick2,
               tableHeight,
               locale,
               rowclick,
          }
     },
})
</script>

<style scoped lang="scss">
::v-deep(.el-table__expanded-cell) {
     padding: 0;
}

::v-deep(.el-table__cell) {
     padding: 2px 0 !important;
}

.yh-table {
     height: 100%;
     width: 100%;

     .header {
          height: 45px;
          margin: 0 10px;

          .handler {
               text-align: right;
          }
     }

     .footer {
          height: 10%;
          padding: 0 10px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
     }
}
</style>
